<template>
  <div class="list-container c21">
    <h4>账号列表</h4>
    <div class="p30">
      <template>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="账号" prop="account"> </el-table-column>
          <el-table-column label="用户组" prop="userGroup"> </el-table-column>
          <el-table-column label="创建时间" prop="ctime"> </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          @size-change="sizechange"
          @current-change="pagechange"
          :current-page="page"
          :page-sizes="pagesizes"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <p class="mt30">
        <el-button type="danger" @click="clialldel" :disabled="statusbtn"
          >批量删除</el-button
        >
        <el-button type="primary" @click="toggleSelection()"
          >取消选择</el-button
        >
      </p>
    </div>
    <div class="flog" v-show="status">
      <p>
        <span>账&emsp;号</span
        ><el-input placeholder="请输入账号" v-model="account"></el-input>
      </p>
      <p>
        <span>用户组</span>
        <el-select v-model="value" placeholder="请选择用户组">
          <el-option label="超级管理员" value="超级管理员"> </el-option>
          <el-option label="普通管理员" value="普通管理员"> </el-option>
        </el-select>
      </p>
      <p class="btnbox">
        <el-button type="primary" @click="affirm">确认</el-button>
        <el-button type="danger" @click="status = false">取消</el-button>
      </p>
    </div>
  </div>
</template>

<script>
import { acclist, accdel, editacc, alldel } from "@/apis/users";
import { getYYYYMMDD } from "@/utils/utils";

export default {
  data() {
    return {
      tableData: [],
      checked: false,
      page: 1,
      pagesizes: [5, 10, 15, 20],
      pagesize: 5,
      total: 0,
      account: "",
      value: "普通管理员",
      status: false,
      id: 0,
      multipleSelection: [],
      arr: [],
      statusbtn: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    sizechange(newsize) {
      this.pagesize = newsize;
      this.getList();
    },
    pagechange(newpage) {
      this.page = newpage;
      this.getList();
    },
    //发请求获取数据
    getList() {
      acclist({ currentPage: this.page, pageSize: this.pagesize }).then(
        (res) => {
          console.log(res);
          for (const item of res.data.data) {
            item.ctime = getYYYYMMDD(item.ctime);
          }
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      );
    },
    //删除
    handleDelete(i, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          accdel({ id: row.id }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "系统提示:账号删除成功!",
                type: "success",
                center: true,
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //修改账号信息
    handleEdit(item) {
      this.status = true;
      this.id = item.id;
      this.account = item.account;
      this.value = item.userGroup;
    },

    //确认修改
    affirm() {
      this.$confirm("此操作将修改数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          editacc({
            id: this.id,
            account: this.account,
            userGroup: this.value,
          }).then((res) => {
            console.log(res);
            if (res.data.code == 0) {
              this.$message({
                message: "系统提示:账号修改成功!",
                type: "success",
                center: true,
              });
              this.status = false;
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //批量删除
    handleSelectionChange(val) {
      this.ids = val.map((obj) => obj.id);
      if (this.ids.length >= 1) {
        this.statusbtn = false;
      } else {
        this.statusbtn = true;
      }
    },

    clialldel() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          alldel({ ids: JSON.stringify(this.ids) }).then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: "删除成功!",
              center: true,
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //取消全选
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
  },
};
</script>

<style lang="less" scoped>
.list-container {
  background-color: #fff;
  box-shadow: 0 0 15px 1px #ccc;
  padding-bottom: 40px;
  border-radius: 5px;
  position: relative;
  h4 {
    line-height: 75px;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
  }
  div {
    .block {
      margin-top: 40px;
    }
  }
  .flog {
    width: 400px;
    height: 300px;
    padding: 50px 20px;
    box-shadow: 0 0 15px 3px #ccc;
    background-color: #fff;
    position: absolute;
    top: 20%;
    left: 30%;
    p {
      .el-input,
      .el-select {
        width: 300px;
        margin-left: 10px;
        margin-bottom: 30px;
      }
    }
    .btnbox {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
    }
  }
}
</style>